h2.afspraak-titel {
  margin: 0 0 20px 0;
  padding: 0;
  color: $primary-color;
}

.column-oude-afspraak,
.column-nieuwe-afspraak {
  @include box-sizing('border-box');

  .control-label {
    width: 120px;
  }

  .controls {
    margin-left: 130px;
  }

  .cp-btn {
    font-weight: normal;
    font-size: rs(13, 13);
  }
}

.column-afspraak-zoeken {
  clear:both;
}

.label-inline {
  display:inline-block;
  width:75px;
}

.size-normal {
  font-size: 13px;
  font-weight: normal;
  line-height: 20px;
}

.column-oude-afspraak {
  @include column(5, 12);
  padding-right: 10px;
}

.column-nieuwe-afspraak {
  @include column(7, 12);
  padding-left: 10px;

  fieldset.form-horizontal {
    @extend .box-bordered;
  }

  div.buttons {
    float: right;
    width: auto;
    clear: none;
  }
}

.selectie-form {
  clear: left;
}

.bevestigingsbrief {
  float: left;
  padding-top: 10px;
}

.filter-view {
  margin-left: 10px;
}

fieldset.centrum-zoeken {
  margin-bottom: 20px;
  padding: 15px;

  table.table-bordered {
    border: 0 none;
    th, td {
      border-width: 1px 0;
      font-weight: normal;
      padding: 10px 5px;
    }

    th {
      color: #a5a5a5;
    }

    td {
      cursor: pointer;
    }
  }
}

table.beschikbare-tijden {
  empty-cells: show;
  td {
    padding: 10px;
    text-align: center;
  }
}

table.dag-selectie,
table.tijd-selectie {
  border-color: #919191;
  td, th {
    border-color: #919191;
  }
}

th.dag-column {
  text-align: center;
  font-size: 12px;
  font-weight: normal;
  padding: 10px;

  &.vandaag {
    color: $primary-color;
  }

  @include respond-to('tablet-portrait') {
    strong {
      display: block;
    }
  }
}

td.beschikbaar,
td.niet-beschikbaar {
  padding: 10px;
  text-align: center;
  vertical-align: middle;
}

td.beschikbaar {
  cursor: pointer;
  background-color: adjust-lightness($beschikbaarColor, 30);
  &:hover {
    background-color: $beschikbaarColor;
  }
}


.niet-beschikbaar {
  background-color: #F4F4F4;
}

table.tijd-selectie td {
  padding: 0;
  text-align: center;
}

table.tijd-selectie td span {
  padding: 5px;
  display: block;
  background-color: #F4F4F4;
  color: #aaa;
}

table.tijd-selectie td a {
  padding: 10px 5px;
  display: block;
  text-decoration: underline;
  color: darken($beschikbaarColor, 15);
  background-color: tint($beschikbaarColor, 80);

  &:hover {
    color: white;
    background-color: $beschikbaarColor;
  }
}

table.tijd-selectie td a.selected {
  color: #005782;
  text-decoration: none;
  @include background-image(linear-gradient(white, #CEF3FF));
}

fieldset.huidige-afspraak-afzeggen {
  @extend .box-bordered;
}